<template>
    <div class="charts" ref="charts"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        name: "index",

        mounted() {
            // 初始化echarts实例
            let lineCharts = echarts.init(this.$refs.charts);
            lineCharts.setOption({
                xAxis: {
                    show: false,
                    // 均分
                    type: 'category'
                },
                yAxis: {
                    show: false,
                },
                series: [
                    {
                        type: 'line',
                        data: [10,7,33,12,48,9,20,23],
                        // 拐点样式设置
                        itemStyle: {
                            opacity: 0,
                        },
                        // 线条的颜色
                        lineStyle: {
                            color: 'purple',
                        },
                        // 填充颜色的设置
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'purple' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        symbol:'none', //去掉折线图中的节点
                        smooth: true,  //true 为平滑曲线，false为直线
                    }
                ],
                grid: {
                    left: 10,
                    top: 10,
                    bottom: 10,
                    right:10,
                }
            });
        }
    }
</script>

<style scoped>
    .charts {
        width: 100%;
        height: 100%;
    }
</style>
